/**
 * Created by zzy on 2017/9/14.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    Dimensions,
    PixelRatio,
} from 'react-native';
import Modal from 'react-native-modalbox';
import waterTiketStore from '../store/WaterTiketStore';
import {observer} from 'mobx-react/native'
let ScreenWidth = Dimensions.get('window').width;
import Ionicons from 'react-native-vector-icons/Ionicons';

@observer
export default class TiketModelModal extends Component{
    render(){
        let {callback}=this.props;
        return <Modal
            style={{backgroundColor:'rgba(0,0,0,0)',alignItems:'center',
                justifyContent:'center'}}
            position={"center"}
            ref={"tiketModelModal"}
            onClosed={this.onClose}
            onOpened={this.onOpen}
            swipeToClose={true}
            backButtonClose={true}
        >
            <View style={{alignItems:'center',borderRadius:8,backgroundColor:'white',width:ScreenWidth-60}}>
                <View style={{alignItems:'center'}}>
                    <Text style={{marginTop:10}}>选择套餐</Text>
                </View>
                <View style={{flexDirection:'row',padding:10,flexWrap:'wrap'}}>
                    {
                        waterTiketStore.productModel.productItemModels.map((policy, i)=>{
                            let borColor = waterTiketStore.productModel.activePolicyIndex==i ? '#4dc0ff' : '#333333';
                            return  <TouchableOpacity activeOpacity={1}
                                                      onPress={()=>{
                                                          waterTiketStore.productModel.setActivePolicyIndex(i);
                                                      }}
                                                      key={i}
                                                      style={[{borderColor:borColor,borderWidth: 3 / PixelRatio.get(),
                                                          margin:5,
                                                          alignItems:'center',
                                                          padding:3}]}>
                                <Text style={{color:borColor,flexDirection:'row'}}>{policy.name}</Text>
                            </TouchableOpacity>

                        })
                    }
                </View>
                <View style={{height:50,flexDirection:'row',backgroundColor:'#f5f5f5',alignItems:'center',borderRadius:8}}>
                    <Text style={{color:'red',marginLeft:10,flex:1,fontSize:18}}>¥{waterTiketStore.productModel.ActiveProductItemModel.currentPrice}</Text>
                    {
                        waterTiketStore.productModel.ActiveProductItemModel.selectCount!=0?<View style={{flexDirection:'row',alignItems:'center',marginRight:20}}>

                            <TouchableOpacity activeOpacity={1}
                                              onPress={()=>{
                                                  //waterTiket.decreaseMultiple(waterTiket.activePolicy);
                                                  callback('decrease')
                                              }}>
                                <Ionicons name="ios-remove-circle" size={25} color="#1EAFF3"/>
                            </TouchableOpacity>
                            <Text style={{padding:8}}>{waterTiketStore.productModel.ActiveProductItemModel.selectCount+''}</Text>
                            <TouchableOpacity activeOpacity={1}
                                              onPress={()=>{
                                                  //waterTiket.addMultiple(waterTiket.activePolicy);
                                                  callback('increase')
                                              }}>
                                <Ionicons name="ios-add-circle" size={25} color="#1EAFF3"/>
                            </TouchableOpacity>
                        </View>:<TouchableOpacity style={{flexDirection:'row',borderRadius:15,backgroundColor:'#1EAFF3',padding:7,marginRight:20}}
                                                  onPress={()=>{
                                                      //waterTiket.addPolicy2Cart();
                                                      //this._shoppingCartAction('increase');
                                                      callback('increase')
                                                  }}
                        >
                            <Ionicons name="ios-cart-outline" color="#fff" size={18}/>
                            <Text style={{marginLeft:5,color:'white'}}>加入购物车</Text>
                        </TouchableOpacity>
                    }

                </View>
            </View>

        </Modal>

    }
    _open(){
        this.refs.tiketModelModal.open();
    }
}